<template>
	<div class="tag-view">
		<div class="tag-list">
			<p>类型:</p>
			<a
				:class="{
					tag: true,
					active: '全部' == activeTag
				}"
				@click="changeTag('全部')"
				>全部</a
			>
			<a
				:class="{
					tag: true,
					active: item.value == activeTag
				}"
				v-for="item in tagItems"
				:key="item"
				@click="changeTag(item.value)"
				>{{ item.label }}</a
			>
		</div>
		<!-- 电影卡片组件 -->
		<movieCard :movieList="tagMovieList"></movieCard>
		<a-empty v-if="tagMovieList.length < 1" />
	</div>
</template>

<script setup>
import tagItems from './movieCategoryOptions'
import movieApi from '../../api/movie'
import { useRoute } from 'vue-router'
const route = useRoute(),
	activeTag = ref('全部'),
	tagMovieList = ref([])
if (route.query?.tag) activeTag.value = route.query.tag
// 获取对应tag的电影列表
function getTagMovie(tag) {
	if (tag === '全部') {
		movieApi.getMovieList().then(res => {
			tagMovieList.value = res
		})
	} else {
		movieApi.getTagMovie(tag).then(res => {
			tagMovieList.value = res
		})
	}
}
getTagMovie(activeTag.value)
// 修改tag
function changeTag(tag) {
	activeTag.value = tag
	getTagMovie(tag)
}
</script>

<style lang="scss" scoped>
.tag-view {
	display: flex;
	flex-direction: column;
	width: 1120px;
	min-width: 1120px;
	margin: 0 auto;
	padding: var(--normal-distance);
	background-color: var(--main-2-bg);

	& > * + * {
		margin-top: var(--normal-distance);
	}
}

// 标签列表
a {
	text-decoration: none;
	color: black;
}

.tag-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--normal-distance);
	color: var(--fc-bg);
	.tag {
		flex: 4rem;
		flex-grow: 0;
		min-width: 0;
		text-align: center;
		padding: var(--normal-sm-distance);
		color: var(--fc-bg);
		border-radius: 10px;
		cursor: pointer;
	}

	.active {
		background-color: #c0392b;
		color: black;
	}
}
</style>
